<template>
  <div class="nav-header">
    <div class="back-btn">
      <font-awesome-icon icon="fas fa-bars" @click="toggleSidebar" />
    </div>
    <div class="title-and-dropdown">
      <img src="@/assets/img/logo.png" alt="" mode="aspectFit" class="logo" />
      <div class="title">康小美</div>
      <div class="dropdown" :class="{ open: isDropdownOpen }">
        <button class="dropdown-toggle" @click="toggleDropdown">
          <font-awesome-icon icon="fas fa-caret-down" />
        </button>
        <!-- 添加过渡效果 -->
        <transition name="dropdown-fade">
          <ul class="dropdown-menu">
            <li class="dropdown-item">选项1</li>
            <li class="dropdown-item">选项2</li>
            <li class="dropdown-item">选项3</li>
          </ul>
        </transition>
      </div>
    </div>
    <div class="right-icons">
      <button class="home-btn" @click="goToHome">
        <!-- <font-awesome-icon icon="fas fa-home" /> -->
      </button>
      <button class="new-chat-btn" @click="goToNewChat">
        <font-awesome-icon icon="fas fa-comment" />
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDropdownOpen: false
    };
  },
  methods: {
    toggleDropdown() {
      this.isDropdownOpen = !this.isDropdownOpen;
    },
    goToHome() {
      this.$router.push('/');
    },
    goToNewChat() {
      // 这里可以添加跳转到新建会话页面的逻辑
      console.log('Go to new chat');
      // 主页显示初始化内容
      
    },
    toggleSidebar() {
      this.$emit('toggle-sidebar');
    }
  }
};
</script>

<style scoped lang="scss">
$light-blue: #e6f3f5;
$white: #ffffff;
$hover-light-blue: #b2ebf2;
$dropdown-bg: #f9f9f9;
$dropdown-hover-bg: #e0e0e0;
$dropdown-border: #ccc;
$dropdown-item-color: #333;
$dropdown-item-hover-color: #fff;
$dropdown-item-hover-bg: #007bff;
$mid-blue: #b3e5fc; // 新增中间蓝色

.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 0 16px;
  margin-bottom: 16px;
  // 优化后的渐变背景
  background: linear-gradient(to bottom, $light-blue 0%, #f4f8fc 100%);
  // background: linear-gradient(to bottom, $mid-blue 0%, $light-blue 30%, $white 100%);
  // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  transition: background-color 0.3s ease;

  &:hover {
    background: linear-gradient(to bottom, $hover-light-blue 0%, $mid-blue 30%, $white 80%);
  }
}
.back-btn{
  flex:1
}
.title-and-dropdown{
  flex:6
}
.right-icons{
  flex:2
}
.back-btn,
.right-icons button {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 18px;
  color: #333;
  // 调整按钮的外边距，向上移动
  margin-top: -20px; 
}
.home-btn,.new-chat-btn{
  background-color: #fff;
}
.title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #333;
  margin-right: 8px;
  // 调整标题的外边距，向上移动
  margin-top: -20px; 
}

.title-and-dropdown {
  display: flex;
  align-items: center;
}
// 添加 logo 样式
.logo {
  width: 40px;  // 设置合适的宽度
  height: 40px; // 保持宽高比
  object-fit: contain; // 确保图片保持比例
  margin-top: -20px; // 与其他元素保持一致的上边距调整
  transition: transform 0.3s ease; // 添加过渡效果
  
  &:hover {
    transform: scale(1.05); // 悬停时略微放大效果
  }
}
.dropdown {
  position: relative;
  display: inline-block;

  .dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
    // 调整下拉按钮的外边距，向上移动
    margin-top: -20px; 
  }

  .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: $dropdown-bg;
    border: 1px solid $dropdown-border;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 8px 0;
    margin: 0;
    min-width: 120px;
    z-index: 1001;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    .dropdown-item {
      padding: 10px 20px; // 增加内边距
      cursor: pointer;
      color: $dropdown-item-color;
      font-size: 14px; // 调整字体大小
      transition: all 0.3s ease; // 过渡效果

      &:hover {
        background-color: $dropdown-item-hover-bg;
        color: $dropdown-item-hover-color;
      }
    }
  }

  &.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
  }
}

.right-icons {
  display: flex;
  align-items: center;

  .home-btn,.new-chat-btn{
    color:#a3a3a3;
  }
}

// 过渡动画
.dropdown-fade-enter-active,
.dropdown-fade-leave-active {
  transition: opacity 0.3s ease;
}

.dropdown-fade-enter,
.dropdown-fade-leave-to {
  opacity: 0;
}
</style>